<template>
	<!-- 变更登录手机号 -->
	<view class="change-layout">
		<xh-section-header :title="`当前手机号：${userStore.user.tel}`"></xh-section-header>
		<xh-form-input title="登录密码" placeholder="请输入登录密码" v-model="password" :password="true" :maxCount="18"></xh-form-input>
		<xh-section-header title="变更手机号后需重新登录"></xh-section-header>
		<xh-form-input title="手机号" v-model="phone" keyboardType="digit" :maxCount="11" placeholder="请输入手机号"></xh-form-input>
		<xh-form-input title="验证码" v-model="code" keyboardType="digit" :maxCount="6" placeholder="请输入短信验证码">
			<template #right>
				<view class="code-btn" :class="[isStartTime ? 'code-btn-select' : '']" @tap="getCodeAction">获取验证码</view>
			</template>
		</xh-form-input>
		<view class="submit-btn edit-btn" @tap="submitAction">确认修改</view>
	</view>
</template>

<script setup>
	import { onUnload } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useUserStore } from '@/stores'
	import { updatePhone } from '@/config/api.js'
	import CryptoTool from '@/utils/crypto/jscrypto.js'
	const userStore = useUserStore()
	//新手机号
	const phone = ref('')
	//验证码
	const code = ref('')
	//登录密码
	const password = ref('')
	//是否开始倒计时
	const isStartTime = ref(false)
	//倒计时总秒数
	const seconds = ref(60)
	//计时器
	let timer = null
	//获取验证码
	const getCodeAction = () => {
		if (isStartTime.value) {
			return
		}
		if (!uni.$u.test.mobile(phone.value)) {
			uni.$tools.showToast('请输入正确的手机号')
			return
		}
		checkPhone({ 'phoneNumber': phone.value }).then((res) => {
			const status = res.result.status
			if (status == '1') {
				uni.$tools.showToast('该手机号已注册，请重新输入')
			} else {
				//校验通过开始获取验证码
				startGetCode()
			}
		}).catch((error) => {})
	}
	//校验通过开始获取验证码
	const startGetCode = () => {
		sendSmsCode({ 'phoneNumber': phone.value, "smsType": "Changemob" }).then((res) => {
			startDownTimer()
		}).catch((error) => {})
	}
	//开始倒计时
	const startDownTimer = () => {
		isStartTime.value = true
		//每秒执行一次
		timer = setInterval(() => {
			seconds.value -= 1
			if (seconds.value == 0) {
				seconds.value = 60
				isStartTime.value = false
				clearInterval(timer)
			}
		}, 1000)
	}
	//确认变更
	const submitAction = ()=>{
		if(uni.$u.test.isEmpty(password.value)){
			uni.$tools.showToast('请输入登录密码')
			return
		}
		else if (!uni.$u.test.mobile(phone.value)) {
			uni.$tools.showToast('请输入正确的手机号')
			return
		}
		else if (uni.$u.test.isEmpty(code.value)) {
			uni.$tools.showToast('请输入短信验证码')
			return
		}
		else{
			let params = {}
			params.smsCode = code.value
			params.newPhoneNumber = phone.value
			params.phoneNumber = userStore.user.tel
			params.loginType = 6
			params.userPassword = CryptoTool.passwordEncrypt(password.value)
			updatePhone(params).then(res=>{
				uni.$auth.logout()
				uni.reLaunch({
					url:'/pages/login/login'
				})
				uni.$tools.showToast('手机号变更成功，请重新登录')
			}).catch(err=>{})
		}
	}
	//页面卸载了
	onUnload(() => {
		clearInterval(timer)
	})
</script>

<style lang="scss" scoped>
	.change-layout {
		.code-btn {
			color: $xh-blue-color;
			padding: 20rpx 0;
		}
		.code-btn-select {
			color: #cccccc;
		}
		.edit-btn{
			width: 600rpx;
			margin: 60rpx auto;
		}
	}
</style>